<!--
 * @Author: your name
 * @Date: 2521-07-09 09:03:22
 * @LastEditTime: 2021-11-05 14:41:49
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jinfeng_up\src\components\TaskStatusBtn\TaskStatusBtn.vue
-->
/* 封装一个通用的状态按钮 */
<template>
  <div class="container">
    <div :class="selectClass">{{ label }}</div>
  </div>
</template>

<script>
export default {
    name: '',
    components: {},

    // 父传子
    props: {
        isClass: {
            type: Boolean,
            default: true
        },
        type: {
            type: Number,
            default: null
        },
        flowStatusList: {
            type: Array
        }
    },
    data() {
        return {}
    },
    computed: {
        selectClass: {
            get() {
                return this.getClass(this.type)
            }
        },
        label: {
            get() {
                return this.getLabel(this.type)
            }
        }
    },
    watch: {},
    created() {},
    mounted() {},
    methods: {
        getClass(_type) {
            let strClass = 'btn-text_'
            if (_type != '' && this.isClass) {
                strClass = strClass + _type
            }
            return strClass
        },
        getLabel(_type) {
            let label = ''
            if (this.flowStatusList.length && _type != null) {
                this.flowStatusList.findIndex(item => {
                    if (item.value == _type) {
                        label = item.label
                        return true
                    } else {
                        return false
                    }
                })
            }
            return label
        }
    }
}
</script>

<style scoped lang="less">
.container {
  display: flex;
  justify-content: center;
  align-content: center;
  font-size: 12px;
  font-weight: 400;
}

.btn-text_0 {
  width: 60px;
  height: 25px;
  border-radius: 15px;
  font-size: 12px;

  font-weight: 400;
  text-align: center;
  line-height: 25px;
}
.btn-text_1 {
  width: 60px;
  height: 25px;
  border-radius: 15px;
  font-size: 12px;

  font-weight: 400;
  text-align: center;
  line-height: 25px;
}
.btn-text_2 {
  width: 60px;
  height: 25px;
  border-radius: 15px;
  font-size: 12px;

  font-weight: 400;
  text-align: center;
  line-height: 25px;
}
.btn-text_3 {
  width: 60px;
  height: 25px;
  border-radius: 15px;
  font-size: 12px;

  font-weight: 400;
  text-align: center;
  line-height: 25px;
}
.btn-text_4 {
  width: 60px;
  height: 25px;
  border-radius: 15px;
  font-size: 12px;

  font-weight: 400;
  text-align: center;
  line-height: 25px;
}
</style>
